<div class="row container">

	<div class="col-md-6">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title"><?php echo "Event"; ?></h3>
			</div>
			<div class="panel-body">
				<div class="col-md-12">
					<span class="glyphicon glyphicon-tags" aria-hidden="true"></span>&nbsp;&nbsp;<?php echo "Progress (most recent first)"?>
				</div>
				<div class="col-md-12">
					<div id="barGraphDiv"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-md-6">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title"><?php echo "Highlight" ?></h3>
			</div>
			<div class="panel-body">
				<div class="col-md-6">
					<span class="glyphicon glyphicon-tags" aria-hidden="true"></span>&nbsp;&nbsp;<?php echo "Upcoming Event"?>
					<ul>
						<li style="width:200px">Title:<span id="data-title" style="overflow: hidden;text-overflow:ellipsis;">***</span></li>
						<li>Place: <span id="data-place">***</span></li>
						<li>Date:<span id="data-date">***</span></li>
						<li>Seat:<span id="data-seat">***</span></li>
						<li>Registrations:<span id="data-registrations">***</span></li>
					</ul>

				</div>
				<div class="col-md-6">
					<div id="pieChartDiv"></div>
				</div>

			</div>
		</div>
	</div>

	<!-- <div class="col-md-6">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title"><?php echo "Tools" ?></h3>
			</div>
			<div class="panel-body">
				<p>
					<a class="btn btn-info pull-right" href="#"><?php echo "go to tools" ?> &raquo;</a>
				</p>
			</div>
		</div>
	</div> -->
</div>

<!-- get latest pending event data -->

<script type="text/javascript"> 
    $(document).ready(function() {        
		$.ajax({
			method: "POST",
			url: "<?php echo $this->url('events', array('controller'=>'pendingevent','action'=>'getLatestPendingEvent')); ?>"
		})
		.done(function(data) {
    		$('#data-title').html(data.title);
    		$('#data-place').html(data.place);
    		$('#data-date').html(data.date);
    		$('#data-seat').html(data.seat);
    		$('#data-registrations').html(data.registrations);
		});
    });
</script>

<!-- genarate graph data -->

<script type="text/javascript">
		$(document).ready(function(){
		    $.ajax({
				method: "POST",
				url: "<?php echo $this->url('events', array('controller'=>'pendingevent','action'=>'getHighlightChartData')); ?>"
			})
			.done(function(data) {			
    			var data = [
    				['Registered', data.registered],['Available', data.available]
    			  ];
    			var plot1 = jQuery.jqplot ('pieChartDiv', [data], 
    				{ 
    				  seriesDefaults: {
    					renderer: jQuery.jqplot.PieRenderer, 
    					rendererOptions: {
    						showDataLabels: true,
    					}
    				  }, 
    				  legend: { show:true, location: 's' },
    				 // dataRenderer: getPieChartData,
    				}
    			  );
			});

			  //bar graph

			 var line1 = [['2010-02-03', 350],['2011-02-03', 300],['2012-02-03', 475],['2013-02-03', 200],['2014-02-03', 365]];
			 
			    $('#barGraphDiv').jqplot([line1], {
			        seriesDefaults:{
			            renderer:$.jqplot.BarRenderer,
			            label:'Participants'
			        },
			        axes:{
			            xaxis:{
			                renderer: $.jqplot.CategoryAxisRenderer
			            }
			        },
			        highlighter:{show:true},
			        legend: { show:true, location: 'n' },
			        
			    });
			  
		});
		var getPieChartData = function() {
			var data = null;
			$.ajax({
		        async: false,
		        url: '<?php //echo $this->baseUrl(); ?>/charts/getshare',
		        dataType: 'json',
		        success: function(response) {
		            data = response;
		        },
		    });

		    return data;
		}
</script>
</body>
</html>

